<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Window-target" content="_top">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>[[${#params.value("website_logo_words")}]] - 一个关于Java和Spring的个人博客</title>
    <!-- InstanceEndEditable -->
	<meta name="Author" th:content='${#params.value("author_name")}'>
	<meta name="Copyright" th:content='${#params.value("author_name")}'>
	<meta name="keywords" th:content='${#params.value("key_word")}' />
	<meta name="description" th:content='${#params.value("website_info_title")}'/>
	<link rel="stylesheet" th:href="@{/css/loading.css}">
	<link rel="stylesheet" th:href="@{/css/scroll-bar.css}">
	<link rel="stylesheet" th:href="@{/Eextend/layui/css/layui.css}">
	<link rel="stylesheet" th:href="@{/css/common.css}">
	<link rel="stylesheet" th:href="@{/css/suspension.css}">
	<link rel="stylesheet" th:href="@{/css/animate.css}">
	<link rel="stylesheet" th:href="@{/Eextend/iconfont/iconfont.css}">


	<script type="text/javascript" th:src="@{/Eextend/iconfont/iconfont.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/Eextend/layui/layui.js}"></script>
	<script type="text/javascript" th:src="@{/js/wow.min.js}"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!--
               ▄              ▄
              ▌▒█           ▄▀▒▌
              ▌▒▒▀▄        ▀▒▒▒▐
             ▐▄▀▒▒▀▀▀▀▄▄▄▀▒▒▒▒▒▐
           ▄▄▀▒▒▒▒▒▒▒▒▒▒▒█▒▒▄█▒▐
         ▄▀▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒█▒▒▒▒▒▐
        ▐▒▒▒▄▄▄▒▒▒▒▒▒▒▒▒▒▒▒▒▀▄▒▒▌
        ▌▒▒▐▄█▀▒▒▒▒▄▀█▄▒▒▒▒▒▒▒█▒▐
       ▐▒▒▒▒▒▒▒▒▒▒▒▌██▀▒▒▒▒▒▒▒▒▀▄▌
       ▌▒▀▄██▄▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌
       ▌▀▐▄█▄█▌▄▒▀▒▒▒▒▒▒░░░░░░▒▒▒▐
      ▐▒▀▐▀▐▀▒▒▄▄▒▄▒▒▒  typecho  ▒▌
      ▐▒▒▒▀▀▄▄▒▒▒▄▒▒▒▒▒▒░░░░░░▒▒▒▐
       ▌▒▒▒▒▒▒▀▀▀▒▒▒▒▒▒▒▒░░░░▒▒▒▒▌
       ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐
        ▀ yo-du ▒▒▒▒▒▒▒▒▒▒▒▄▒▒▒▒▌
          ▀▄▒▒▒▒▒▒▒▒▒▒▄▄▄▀▒▒▒▒▄▀
         ▐▀▒▀▄▄▄▄▄▄▀▀▀▒▒▒▒▒▄▄▀
        ▐▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▀▀

        --你好，世界！生活，从敲的第一行代码开始。
    -->
<div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="object_four"></div>
                <div class="object" id="object_three"></div>
                <div class="object" id="object_two"></div>
                <div class="object" id="object_one"></div>
            </div>
        </div>
    </div>
	<div th:replace="/common/fragment :: frontendHeadher"></div>
<section class="bg-overlay layui-hide ">
        <div class="overlay"></div>
        <div class="layui-row text py-5" >
              <div class="lead" th:utext='${#params.value("website_logo_small_words")}'>Keep on going never give up.</div>
            <h1 id="code">
				[[${words?.title}]]
            </h1>
            <a href="#welcome" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-lg">Let's Go</a>
        </div>

		<div class=" nexts animated-circles animated">
			<div class="circle c-1"></div>
			<div class="circle c-2"></div>
			<div class="circle c-3"></div>
		</div>
	   <a class="next wow fadeInUp animated" data-wow-duration="5s" href="#welcome" style="height: 54px;"></a>
</section>
    <section class="container">
		<!-- InstanceBeginEditable name="EditRegion1" -->
			
		<!-- 首页样式 -->
		<link href="css/Index.css" rel="stylesheet" />
		
		<div id="welcome" class="target-fix"></div>
		<div class="about">
			<div class="row-container">
				<div class="about-w3ls-info text-center py-5">
					<h3>About Us</h3>
					<p id="about_us" th:utext='${#params.value("about_us_title")}'></p>
					<a href="/frontend/about" class="wow rotateIn" data-wow-delay="0.2s">Read More</a>
				</div>
			</div>
		</div>
	
		<div class="blog">
			<div class="row-container wow fadeInUp">
				<div class="layui-row">
					<h2 class="container-title">热门文章</h2>
					<p class="container-lead text-muted" th:utext='${#params.value("lot_title")}'></p>
				</div>
				<div class="layui-row layui-col-space30 blog-body">
					<div class="layui-col-md4 layui-col-sm6 layui-col-xs12" th:each="item:${list}">
						<article class="card">
							<a th:href="'/article/'+${item.id }">
								<img class="card-img-top" th:if="${item.cover !=null && item.cover != ''}" th:src="${item.cover }" >
								<img class="card-img-top" th:if="${item.cover ==null || item.cover == ''}" src="/images/test.jpg" >
							</a>
							<div class="card-body">
								<div class="card-subtitle mb-2 text-muted">[[${item.createBy.nickname}]]&nbsp;&nbsp;[[${item.createDate}]]</div>
								<h4 class="card-title"><a th:href="'/article/'+${item.id }">[[${#strings.length(item.title)>15?#strings.substring(item.title,0,15):item.title}]]...</a></h4>
								<p class="card-text">[[${item.summary}]]</p>
								<div class="text-right">
									<a th:href="'/article/'+${item.id }" class="card-more">阅读更多&nbsp;<i class="layui-icon layui-icon-right"></i></a>
								</div>
							</div>
						</article>
					</div>
				</div>
			</div>
		</div>

		<div class="new-comment">
			<h3 class="tittle-wthree text-center">最近留言</h3>
			<!-- Swiper -->
			<div id="swiper1" class="swiper-container wow zoomIn">
				<div class="swiper-wrapper">
					<div class="swiper-slide" th:each="item:${messages}">
						<div class="testimonials-gd-vj">
							<p class="sub-test">
								<i class="layui-icon layui-extend-quotation"></i>
							   <div th:utext="${item.comment}"></div>
							</p>
							<div class="user">
								<a href="#" target="_blank" rel="nofollow">
									<div>
										<img class="layui-circle" th:src="${item.createBy.picture}" alt="">
										<h5 class="layui-elip">[[${item.createBy.nickname}]]</h5>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		
<!--	留言样式风格二，自适应效果不同，喜欢哪种自选	-->
<!--
		<div class="new-comment">
			<div class="row-container">
				<h3 class="tittle-wthree text-center">最近留言</h3>
				<div class="layui-row layui-col-space25">
					<div class="layui-col-md4 layui-col-xs12">
						<div class="testimonials-gd-vj">
							<p class="sub-test">
								<i class="layui-icon layui-extend-quotation"></i>
								有时候，耳朵比眼睛还重要，很多东西用耳朵听比用眼睛看好，一个人假装开心，但声音就装不了。细心一听就知道了。
							</p>
							<div class="layui-row user">
								<a href="#" target="_blank" rel="nofollow">
									<div class="layui-col-xs12">
										<img class="layui-circle" src="images/nan.png" alt="">
										<h5>付子博</h5>
									</div>
								</a>
							</div>
						</div>
					</div>
					<div class="layui-col-md4 layui-col-xs12">
						<div class="testimonials-gd-vj">
							<p class="sub-test">
								<i class="layui-icon layui-extend-quotation"></i>
								有时候，耳朵比眼睛还重要，很多东西用耳朵听比用眼睛看好，一个人假装开心，但声音就装不了。细心一听就知道了。
							</p>
							<div class="layui-row user">
								<a href="#" target="_blank" rel="nofollow">
									<div class="layui-col-xs12">
										<img class="layui-circle" src="images/nv.png" alt="">
										<h5>易sir</h5>
									</div>
								</a>
							</div>
						</div>
					</div>
					<div class="layui-col-md4 layui-col-xs12">
						<div class="testimonials-gd-vj">
							<p class="sub-test">
								<i class="layui-icon layui-extend-quotation"></i>
								有时候，耳朵比眼睛还重要，很多东西用耳朵听比用眼睛看好，一个人假装开心，但声音就装不了。细心一听就知道了。
							</p>
							<div class="layui-row user">
								<a href="#" target="_blank" rel="nofollow">
									<div class="layui-col-xs12">
										<img class="layui-circle" src="images/nan.png" alt="">
										<h5>钠盐</h5>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>
        	</div>      
    	</div>
-->
		
		<div id="statistics" class="bg-overlay">
			<div class="overlay"></div>
			<div class="row-container wow slideInLeft">
				<div class="layui-row text-center">
					<div class="layui-col-md3 layui-col-sm3 layui-col-xs6">
						<i class="layui-icon layui-extend-dianzan"></i>
						<h4 id="like-count" class="animateNum" data-animatetarget="2048"></h4>
						<p>网站点赞数量</p>
					</div>
					<div class="layui-col-md3 layui-col-sm3 layui-col-xs6">
						<i class="layui-icon layui-icon-dialogue"></i>
						<h4 id="comment-count" class="animateNum" th:data-animatetarget="${countComment}"></h4>
						<p>用户评论数量</p>
					</div>
					<div class="layui-col-md3 layui-col-sm3 layui-col-xs6">
						<i class="layui-icon layui-extend-computer_icon"></i>
						<h4 id="visit-count" class="animateNum" th:data-animatetarget="${visitor}"></h4>
						<p>网站访问次数</p>
					</div>
					<div class="layui-col-md3 layui-col-sm3 layui-col-xs6">
						<i class="layui-icon layui-extend-riqi"></i>
						<h4 id="working-day" class="animateNum" data-animatetarget="180"></h4>
						<p>网站运行天数</p>
					</div>
				</div>
			</div>
		</div>

		<!--<div class="hot-review py-5">-->
			<!--<div class="row-container wow slideInRight">-->
				<!--<h3 class="tittle-wthree text-center">热评用户</h3>-->
				<!--<div class="layui-row layui-col-space25 bottom-grids text-center">-->
					<!--<div class="layui-col-md4 layui-col-sm4">-->
						<!--<svg class="icon" aria-hidden="true">-->
							<!--<use xlink:href="#layui-extend-jiangbei-1"></use>-->
						<!--</svg>-->
						<!--<a href="#" target="_blank" rel="nofollow">-->
							<!--<img class="layui-circle" src="images/nan.png" alt="">-->
							<!--<h4 class="layui-elip">胖大海</h4>-->
						<!--</a>-->
						<!--<p>-->
							<!--本站评论数：<span class="layui-badge layui-bg-orange">88</span>-->
						<!--</p>-->
					<!--</div>-->
					<!--<div class="layui-col-md4 layui-col-sm4">-->
						<!--<svg class="icon" aria-hidden="true">-->
							<!--<use xlink:href="#layui-extend-jiangbei-2"></use>-->
						<!--</svg>-->
						<!--<a href="#" target="_blank" rel="nofollow">-->
							<!--<img class="layui-circle" src="images/nv.png" alt="">-->
							<!--<h4 class="layui-elip">柳岩</h4>-->
						<!--</a>-->
						<!--<p>-->
							<!--本站评论数：<span class="layui-badge layui-bg-blue">66</span>-->
						<!--</p>-->
					<!--</div>-->
					<!--<div class="layui-col-md4 layui-col-sm4">-->
						<!--<svg class="icon" aria-hidden="true">-->
							<!--<use xlink:href="#layui-extend-jiangbei-3"></use>-->
						<!--</svg>-->
						<!--<a href="#" target="_blank" rel="nofollow">-->
							<!--<img class="layui-circle" src="images/nan.png" alt="">-->
							<!--<h4 class="layui-elip">虎哥</h4>-->
						<!--</a>-->
						<!--<p>-->
							<!--本站评论数：<span class="layui-badge layui-bg-gray">24</span>-->
						<!--</p>-->
					<!--</div>-->
					<!--<span class="border-line"></span>-->
				<!--</div>-->
			<!--</div>-->
		<!--</div>-->

		<div class="visitor">
			<h3 class="tittle-wthree text-center">近期访客</h3>
			<!-- Swiper -->
			<div id="swiper2" class="swiper-container wow flipInX">
				<div class="swiper-wrapper">
					<div class="swiper-slide" th:each="item:${users}">
						<a href="#" rel="nofollow">
							<img class="layui-circle" th:src="${item.picture}" alt="">
							<h4 class="layui-elip">[[${item.nickname}]]</h4>
						</a>
					</div>

				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		
		<!-- Swiper CSS And JS -->
		<link href="Eextend/Swiper-4.5.0/css/swiper.min.css" rel="stylesheet" />
		<script src="Eextend/Swiper-4.5.0/js/swiper.min.js"></script>
		<!-- Running JS -->
		<script src="js/jquery.running.min.js"></script>
		<script src="js/Index.js"></script>
		
		
		<!-- InstanceEndEditable -->    
    </section>
	<div th:replace="/common/fragment :: frontendFooter"></div>
	<div th:replace="/common/fragment :: frontendLongin"></div>
    <!-- 打字机特效js-->
	<script type="text/javascript" th:src="@{/js/typewriter.js}"></script>
	<script type="text/javascript" th:src="@{/js/Template.js}"></script>
	<!-- 这个JS展示公告层用的，无关紧要可以删掉 -->
	<!--<script src="js/TempShowTip.js"></script>-->
    <script>
        document.getElementById("code").typewriter();

	</script>


</body>
<!-- InstanceEnd --></html>